<template>
	<view class="users-message">
		<view class="users-message-content">
			<message-card :cardList="cardList"></message-card>
		</view>
	</view>
</template>

<script setup>
	import { reactive } from 'vue'
	import MessageCard from '../common/MessageCard/MessageCard.vue'
	
	const cardList = reactive([
		{
			msgHeaderImg:{
				imgsSrc:"../../../../../static/test-img/xss.jpg",
				imgWidth:"100%",
				imgHeight:"100%"
			},
			msgTitle:"大鲨鲨",
			msgNotReadNum:0,
			msgMainContent:"快来解锁你的学生专属特权",
			msgNotReadTime:"",
			bgcColor:""
		},
		{
			msgHeaderImg:{
				imgsSrc:"../../../../../static/test-img/xdd.jpg",
				imgWidth:"100%",
				imgHeight:"100%"
			},
			msgTitle:"小呆呆",
			msgNotReadNum:0,
			msgMainContent:"还没有新互动消息",
			msgNotReadTime:"",
			bgcColor:""
		},
		{
			msgHeaderImg:{
				imgsSrc:"../../../../../static/test-img/bqgg.jpg",
				imgWidth:"100%",
				imgHeight:"100%"
			},
			msgTitle:"霸气哥哥",
			msgNotReadNum:0,
			msgMainContent:"还没有新互动消息",
			msgNotReadTime:"",
			bgcColor:"",
		}
	])
</script>

<style lang="scss" scoped>
	.users-message{
		margin-top: 30rpx;
		background-color: #fff;
		border-radius:25rpx 25rpx 0 0;
		overflow: hidden;
		width: 100%;
		display:flex;
		justify-content:center;
		align-items: center;
		>.users-message-content{
			display: flex;
			justify-content: center;
			flex-direction: column;
			width: 90%;
		}
	}
</style>